<template>
  <div class="weatherShowWrap">
    <div class="infoArea">
      <div class="infoAreaLine infoAreaLineOne">
        <div class="infoNumber">
          <span class="infoNumCon">{{ weatherInfo.skzdzsRhu || 0 }}</span
          ><span class="infoNumUnit"></span>
        </div>
        <div class="infoAccount"><span>相对湿度</span></div>
      </div>
      <div class="infoAreaLine infoAreaLineTwo">
        <div class="infoNumber">
          <span class="infoNumCon">{{ weatherInfo.skzdzsPre24 || 0 }}</span
          ><span class="infoNumUnit">mm</span>
        </div>
        <div class="infoAccount"><span>降水量</span></div>
      </div>
      <div class="infoAreaLine infoAreaLineThree">
        <div class="infoNumber infoNumbers">
          <span class="infoNumCon">{{
            weatherInfo.skzdzsWindinstmax.replace("m/s", "") || 0
          }}</span
          ><span class="infoNumUnit">m/s</span>
        </div>
        <div class="infoAccount"><span>风速</span></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 0,
    };
  },
  props: ["weatherInfo"],
  mounted() {},
  watch: {},
  components: {},
  methods: {},
};
</script>
<style type="text/css" lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.weatherShowWrap {
  .infoArea {
    text-align: center;
    margin-top: 15px;
    color: white;
    display: flex;
    .infoAreaLine {
      width: 33%;
    }

    .infoNumCon {
      font-size: 36px;
      font-weight: 600;
    }

    .infoAccount {
      font-size: 14px;
    }

    .infoAreaLineTwo::before {
      content: "";
      height: 30px;
      width: 1px;
      display: block;
      float: left;
      background: white;
      margin-top: 14px;
    }

    .infoAreaLineThree::before {
      content: "";
      display: inline-block;
      height: 30px;
      width: 1px;
      float: left;

      background: white;
      margin-top: 14px;
    }
    .infoNumbers {
      padding-left: 15px;
    }
  }
}
</style>
